<template>
  <div class="artist_detail_contaner padd100">
    <el-row :gutter="20">
      <el-col :lg="20" style="margin-bottom:20px">
        <div class="artist_info_wrapper">
          <div class="artist_title">
            <span class="artist_name">
              {{data.artist.name}}
            </span>
            <span class="artist_sub_name" v-for="item in artist.alias">
              {{item + "&nbsp;&nbsp"}}
            </span>
          </div>
          <el-row :gutter="20">
            <el-col :lg="10">
              <div class="artist_gally_img">
                <img :src="data.artist.cover + '?param=640y300'" alt="">
                <div class="mask_and_b_op">
                  <el-button type="info" :icon="User" @click="handleClickToUserHome" v-if="data.user">个人主页</el-button>
                  <el-button type="info" :icon="subed?FolderAdd:Select" @click="getArtistSubData">收藏</el-button>
                </div>
              </div>
            </el-col>
            <el-col :lg="14">
              <div class="artist_info">
                <el-tabs type="border-card" @tab-click="handleClickTab" v-model="activeName">
                  <el-tab-pane label="热门作品" name="first">
                    <div class="panel">
                      <div class="op_wrap">
                        <div class="btn_group" style="margin-bottom:10px">
                          <el-button type="primary" :icon="VideoPlay" @click="play">播放</el-button>
                          <el-button type="primary" :icon="FolderAdd" @click="openCollectionModal">收藏热门50</el-button>
                        </div>
                        <!-- <div class="select_wrap">
                          <el-dropdown>
                            <el-button type="primary">
                              热门单曲<el-icon class="el-icon--right">
                                <arrow-down />
                              </el-icon>
                            </el-button>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <el-dropdown-item>热门单曲</el-dropdown-item>
                                <el-dropdown-item>作词作品</el-dropdown-item>
                                <el-dropdown-item>作曲作品</el-dropdown-item>
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                        </div> -->
                      </div>
                      <div>
                        <MusicTable :tracks="songs" :artistColumn="false" />
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="所有专辑" name="second">
                    <div class="panel" v-loading="secondLoading" element-loading-text="正在玩命加载...">
                      <el-row :gutter="20">
                        <el-col :lg="8" :md="6" :sm="8" :xs="12" v-for="item in hotAlbums" :key="item.id"
                          style="margin-bottom:20px">
                          <div class="artist_album_item">
                            <CdMusic :aitistName="false" @handleClickToAlbumDetail="handleClickToAlbumDetail"
                              :id="item.id" @handleClickToArtistDetail="handleClickToArtistDetail"
                              :picUrl="item.picUrl + '?param=230y150'" :name="item.name" />
                            <span class="cd_time">{{dayjs(item.publishTime).format('YYYY.MM.DD')}}</span>
                          </div>
                        </el-col>
                      </el-row>
                      <!-- <div class="pageination_center" style="margin-top:40px">
                        <el-pagination background v-model:currentPage="pageNum" :page-size="12" :total="total"
                          v-show="total > 0" @current-change="handleCurrentChange" layout="prev, pager, next"
                           />
                      </div> -->
                      <div v-if="showloadSecond" style="display: flex;justify-content: center;margin-top: 20px;">
                        <el-button @click="handleClickLoadMoreSecond" type="primary" v-show="!secondLoading">加载更多
                        </el-button>
                      </div>
                      <div style="display: flex;justify-content: center;margin-top: 20px;" v-else>
                        <span style="font-size:14px;color:#999">-------- 我也是有底线的😓--------</span>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="相关MV" name="third">
                    <div class="panel" v-loading="thirdLoading" element-loading-text="正在玩命加载...">
                      <el-row :gutter="20">
                        <el-col :lg="8" :md="6" :sm="8" :xs="12" v-for="item in mvs" :key="item.id"
                          style="margin-bottom:20px">
                          <div class="mv_item" @click="()=>{router.push({name:'mvs-detail',params:{id:item.id}})}">
                            <div class="top_mv_img cursor_class">
                              <img :src="item.imgurl + '?param=168y103'" alt="">
                              <span class="play_icon">
                                <el-icon color="#eee">
                                  <VideoPlay />
                                </el-icon>
                              </span>
                            </div>
                            <div class="bottom_mv_name text_decoration cursor_class text_ellipsis">
                              {{item.name}}
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <!-- <div class="pageination_center" style="margin-top:40px">
                        <el-pagination background layout="prev, pager, next" :total="1000" />
                      </div> -->
                      <div v-if="showloadThird" style="display: flex;justify-content: center;margin-top: 20px;">
                        <el-button @click="handleClickLoadMoreThird" type="primary" v-show="!thirdLoading">加载更多
                        </el-button>
                      </div>
                      <div style="display: flex;justify-content: center;margin-top: 20px;" v-else>
                        <span style="font-size:14px;color:#999">-------- 我也是有底线的😓--------</span>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="艺人介绍" name="four">
                    <div class="panel">
                      <div class="desc_wrapper">
                        <div class="desc_tit desc_important_tit">{{data.artist.name}}简介</div>
                        <div class="desc_content">
                          {{briefDesc}}
                        </div>
                        <template v-for="(item,index) in introduction" :key="index">
                          <div class="desc_important_tit">{{item.ti}}</div>
                          <div class="desc_content">{{item.txt}}</div>
                        </template>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :lg="4">
        <div class="right_other_container">
          <!-- 相似歌手 -->
          <div class="have_music_list">
            <div class="ohter_title">
              {{cookie?'相似歌手':'热门歌手'}}
            </div>
            <div class="artist_list_item_wrapper">
              <div class="artist_item" v-for="item in artists" :key="item.id">
                <div class="top_artist_img cursor_class" @click="handleClickToArtistDetail(item.id)">
                  <img :src="item.picUrl + '?param=50y50'" alt="" :title="item.name">
                </div>
                <div class="bottom_artist_name text_ellipsis cursor_class text_decoration"
                  @click="handleClickToArtistDetail(item.id)">
                  {{item.name}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <Collection ref="collectionRef" />
  <!-- 登录注册弹窗 -->
  <LoginAndRegister ref="loginAndRegisterRef" />
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, watch } from "vue"
import { User, ArrowDown, Headset, Plus, Timer, Select, VideoPlay, Comment, FolderAdd, Pointer, PriceTag, House, Sunny, Guide, MostlyCloudy } from '@element-plus/icons-vue'
import CommentComponent from "@/components/Comment/index"
import CdMusic from "@/components/CdMusic/index";
import router from "@/router";
import { ElMessage, TabsPaneContext } from 'element-plus'
import { useRoute } from "vue-router";
import { getArtistDetail, getArtistTopSong, getArtistAlbum, getArtistMv, getArtistSimi, getHotArtist, getArtistSub } from "@/api/artist";
import { getArtistDesc } from "@/api/index";
import dayjs from "dayjs";
import Collection from "@/components/Collection/index"
import { collectionTypeRef } from "@/types/collection";
import MusicTable from "@/components/MusicTable";
import { artistSublist } from "@/api/my-music";
import LoginAndRegister from '@/components/LoginAndRegister/index'
import { loginAndRegisterTypeRef } from "@/types/login";
const loginAndRegisterRef = ref<loginAndRegisterTypeRef | null>()
import { useStore } from "vuex";
const store = useStore();
const route = useRoute()
const subed = ref<boolean>(true)
const subt = ref<number>(1)
// 路由参数
let id = route.params.id
let cookie = ref<string | null>(localStorage.getItem('cookie'))
// -------------所有专辑-------------------
const limit = ref<number>(12)
const pageNum = ref<number>(1)
const secondLoading = ref<boolean>(false)
const showloadSecond = ref<boolean>(true)
// -------------所有专辑-------------------
// -------------MV-------------------
const limit2 = ref<number>(12)
const pageNum2 = ref<number>(1)
const thirdLoading = ref<boolean>(false)
const showloadThird = ref<boolean>(true)
// -------------MV-------------------
const collectionRef = ref<collectionTypeRef | null>(null)
const activeName = ref('first')
const singerDetailData = reactive<any>({
  data: {
    artist: {},
    identify: {},
    secondaryExpertIdentiy: [{}],
    user: {}
  }
})
// 歌手热门50曲
const artistHotSongData = reactive<any>({
  songs: [{ al: {} }]
})
// 歌手全部专辑
const artistAlbumData = reactive<any>({
  hotAlbums: [{}],
  artist: { alias: [] }
})
// mv
const mvData = reactive<any>({
  mvs: [{}]
})
// 歌手描述
const artistDescData = reactive<any>({
  briefDesc: '',
  introduction: [{}]
})
// 相似 or 热门歌手
const singerData = reactive<any>({
  artists: [{}]
})
const { data } = toRefs(singerDetailData)
const { songs } = toRefs(artistHotSongData)
const { hotAlbums, artist } = toRefs(artistAlbumData)
const { mvs } = toRefs(mvData)
const { briefDesc, introduction } = toRefs(artistDescData)
const { artists } = toRefs(singerData)
const handleClickToUserHome = () => {
  router.push({
    name: 'user-home',
    params: {
      id: data.value.user.userId
    }
  })
}
// 获取歌手详情信息
const getArtistDetailData = async () => {
  const res: any = await getArtistDetail({ id })
  singerDetailData.data = res.data
}
// 获取歌手描述
const getArtistDescData = async () => {
  const res: any = await getArtistDesc({ id })
  artistDescData.briefDesc = res.briefDesc
  artistDescData.introduction = res.introduction
}
// 获取歌手热门50单曲
const getArtistTopSongData = async () => {
  const res: any = await getArtistTopSong({ id })
  artistHotSongData.songs = res.songs
}
// 获取歌手所有专辑
const getArtistAlbumData = async () => {
  try {
    secondLoading.value = true
    const res: any = await getArtistAlbum({
      id,
      limit: limit.value,
      offset: (pageNum.value - 1) * limit.value,
    })
    artistAlbumData.artist = res.artist
    res.hotAlbums.forEach((item: any) => {
      artistAlbumData.hotAlbums.push(item)
    })
    showloadSecond.value = res.more
  } finally {
    secondLoading.value = false
  }
}
// 获取歌手mv
const getArtistMvData = async () => {
  try {
    thirdLoading.value = true
    const res: any = await getArtistMv({
      id,
      limit: limit2.value,
      offset: (pageNum2.value - 1) * limit2.value,
    })
    res.mvs.forEach((item: any) => {
      mvData.mvs.push(item)
    })
    showloadThird.value = res.hasMore
  } finally {
    thirdLoading.value = false
  }
}
// 获取相似歌手
const getArtistSimiData = async () => {
  const res: any = await getArtistSimi({ id, cookie: cookie.value })
  singerData.artists = res.artists
}
// 获取热门歌手
const getHotArtistData = async () => {
  const res: any = await getHotArtist({
    limit: 20
  })
  singerData.artists = res.artists
}
// 打开收藏组件
const openCollectionModal = () => {
  let cookie = localStorage.getItem('cookie')
  if (cookie) {
    if (collectionRef.value) {
      let arrId: string[] = []
      if (artistHotSongData.songs) {
        artistHotSongData.songs.forEach((item: { id: string; }) => {
          arrId.push(item.id)
        })
      }
      collectionRef.value.id = arrId.toString()
      collectionRef.value.isSongSheet = false
      collectionRef.value.dialogVisible = true
      collectionRef.value.init()
    }
  } else {
    if (loginAndRegisterRef.value) {
      console.log(loginAndRegisterRef.value.loginVisible);
      loginAndRegisterRef.value.loginVisible = true
      loginAndRegisterRef.value.getQrKeyData()
    }
  }

}
// tab 被选中时触发
const handleClickTab = (pane: TabsPaneContext, ev: Event) => {
  // 每次点击重置页数
  pageNum.value = 1
  artistAlbumData.hotAlbums = []
  pageNum2.value = 1
  mvData.mvs = []
  if (pane.props.name === 'second') {
    getArtistAlbumData()
  } else if (pane.props.name === 'third') {
    getArtistMvData()
  }
}
// 去专辑详情页
const handleClickToAlbumDetail = (id: number) => {
  router.push({
    name: 'album-detail',
    params: {
      id
    }
  })
}
// 去歌手 / 艺人 详情页
const handleClickToArtistDetail = (id: number) => {
  router.push({
    name: 'artist-detail',
    params: {
      id
    }
  })
}
// 歌手全部专辑点击加载更多
const handleClickLoadMoreSecond = () => {
  pageNum.value++
  getArtistAlbumData()
}
const handleClickLoadMoreThird = () => {
  pageNum2.value++
  getArtistMvData()
}
// 收藏歌手
const getArtistSubData = async () => {
  let cookie = localStorage.getItem('cookie')
  if (cookie) {
    if (subed.value) {
      subt.value = 1
    } else {
      subt.value = 2
    }
    const res: any = getArtistSub({ id, t: subt.value, cookie })
    if (subt.value === 1) {
      ElMessage({
        message: "收藏成功",
        type: 'success',
        duration: 2000,
      })
    } else {
      ElMessage({
        message: "取消收藏成功",
        type: 'success',
        duration: 2000,
      })
    }
    getartistSublistData()
  } else {
    if (loginAndRegisterRef.value) {
      console.log(loginAndRegisterRef.value.loginVisible);
      loginAndRegisterRef.value.loginVisible = true
      loginAndRegisterRef.value.getQrKeyData()
    }
  }
}
// 获取收藏歌手的列表
const getartistSublistData = async () => {
  let cookie = localStorage.getItem('cookie')
  const res: any = await artistSublist({
    cookie
  })
  res.data.forEach((item: any) => {
    if (item.id == id) {
      // 证明已经有收藏的歌手了
      subed.value = false
    }
  })
}
// 播放
const play = () => {
  let list = filterMusicData()
  store.dispatch('playAll', { list });
}
// 把需要vip 或者音源不可用的过滤出去
const filterMusicData = (): any[] => {
  let list = songs.value.filter((item: any) => {
    return item.fee != 1
  })
  return list
}
if (id) {
  getArtistDetailData()
  getArtistDescData()
  getArtistTopSongData()
  getArtistAlbumData()
  if (cookie.value) {
    getArtistSimiData()
    getartistSublistData()
  } else {
    getHotArtistData()
  }
} else {
  ElMessage({
    message: "参数错误",
    type: 'error',
    duration: 2000,
    onClose: () => {
      history.go(-1)
    }
  })
}
watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
  console.log('路由变化了哦');
  // location.reload()
  id = route.params.id
  if (id && router.currentRoute.value.name === 'artist-detail') {
    getArtistDetailData()
    getArtistDescData()
    getArtistTopSongData()
    getArtistAlbumData()
    if (cookie.value) {
      getArtistSimiData()
      getartistSublistData()
    } else {
      getHotArtistData()
    }
  }
})
</script>
<style lang="scss" scoped>
.artist_detail_contaner {
  margin-top: 20px;


  .artist_info_wrapper {
    .artist_title {
      margin-bottom: 20px;

      .artist_name {
        color: #333;
        font-size: 24px;
        margin-right: 10px;
      }

      .artist_sub_name {
        color: #999;
        font-size: 14px;
      }
    }

    .artist_gally_img {
      position: relative;
      width: 100%;
      height: 500px;
      margin-bottom: 20px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mask_and_b_op {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 10px 20px;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        background: rgba(0, 0, 0, .3);
      }
    }

    .artist_info {
      .panel {
        padding: 20px;
        min-height: 772px;

        .op_wrap {
          display: flex;
          justify-content: space-between;
        }

        .artist_album_item {
          .cd_time {
            margin-top: 8px;
            color: #666;
            font-size: 12px;
          }
        }

        .mv_item {
          .top_mv_img {
            width: 100%;
            height: 120px;
            position: relative;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .play_icon {
              font-size: 40px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }

          .bottom_mv_name {
            font-size: 14px;
            margin-top: 14px;
          }
        }

        .desc_wrapper {
          .desc_tit {
            border-left: 3px solid #409eff;
            padding-left: 10px;
          }

          .desc_important_tit {
            font-weight: 700;
            font-size: 14px;
            color: #333;
          }

          .desc_content {
            color: #666;
            font-size: 12px;
            line-height: 1.8;
            margin-top: 14px;
            margin-bottom: 20px;
          }

          .is_indent {
            text-indent: 2em;
          }
        }
      }
    }

  }

  .right_other_container {
    .have_music_list {
      .artist_list_item_wrapper {
        // margin-left: -25px;
        // overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0;

        .artist_item {
          width: 50px;
          margin-bottom: 10px;
          margin-right: 3px;

          .top_artist_img {
            width: 50px;
            height: 50px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .bottom_artist_name {
            font-size: 12px;
            margin-top: 8px;
            text-align: center;
          }
        }
      }
    }

    .like_music_list {
      margin-top: 40px;

      .like_music_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 16px 0;

        .left_music_info {
          font-size: 12px;
          overflow: hidden;
          flex: 1;

          .music_title {
            color: #333;
          }

          .music_singer {
            color: #999;
            margin-top: 4px;
          }
        }

        .right_opeation {
          padding-left: 10px;
        }
      }
    }

    .ohter_title {
      font-weight: 700;
      font-size: 12px;
      color: #333;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
    }
  }
}

@media screen and (max-width: 768px) {
  .artist_info_wrapper {
    .artist_gally_img {
      height: 300px !important;
    }
  }
}
</style>
